<template>
  <div class="page-container">
    <div class="toolbar">
      <el-row>
        <el-tabs type="border-card">
          <el-tab-pane label="基本信息">
            <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm"
                     :rules="dataFormRules" :disabled="this.$route.query.disabled" class="form">
              <el-row style="margin-top: -20px;">
                <el-divider content-position="center">
                  <span style="font-size:16px;font-weight:800">基本信息</span>
                </el-divider>

<!--                <el-form-item label="" v-show="false" prop="id"  v-show="this.$route.query.disabled">-->
<!--                 <el-input v-model="dataForm.id" placeholder="请输入" ></el-input>-->
<!--                </el-form-item>-->

<!--                       <el-form-item label="部门编码"  prop="deptId" v-show="this.$route.query.disabled">-->
<!--                        <el-input v-model="dataForm.deptId" placeholder="请输入"></el-input>-->
<!--                       </el-form-item>-->
<!--                       <el-form-item label=""  prop="outPlatformKey" v-show="this.$route.query.disabled">-->
<!--                        <el-input v-model="dataForm.outPlatformKey" placeholder="请输入"></el-input>-->
<!--                       </el-form-item>-->
                <el-form-item label="部门编码" prop="deptId">
                  <el-select clearable placeholder="选择部门" v-model="dataForm.deptId">
                    <el-option v-for="(item,index) in deptList" :key="index" :label="item.name"
                               :value="`${item.id},${item.code},${item.name}`"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="平台编码" prop="plaformCode">
                  <el-select clearable placeholder="选择平台" v-model="dataForm.plaformCode">
                    <el-option v-for="(item,index) in platformList" :key="index" :label="item.code"
                               :value="`${item.code},${item.name}`"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="申请金额" prop="applyAmount">
                  <el-input v-model="dataForm.applyAmount" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="附件url" prop="fileUrl">
                    <el-upload
                  class="avatar-uploader"
                  :action="imgUpload"
                  :show-file-list="true"
                  :on-success="handleAvatarSuccess"
                >
                  <img v-if="dataForm.fileUrl" :src="dataForm.fileUrl" class="avatar" v-model="dataForm.fileUrl">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                </el-form-item>
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="dataForm.remark" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="申请原因" prop="applyReason" >
                  <el-input v-model="dataForm.applyReason" placeholder="请输入"></el-input>
                </el-form-item>

                <div v-show="this.$route.query.disabled">
                <!--
                <el-form-item label="部门名称"  prop="bdName" >
                  <el-input v-model="dataForm.bdName" placeholder="请输入"></el-input>
                </el-form-item>
                       <el-form-item label="申请人ID"  prop="applierId" >
                        <el-input v-model="dataForm.applierId" placeholder="请输入"></el-input>
                       </el-form-item>
                       <el-form-item label="申请时间"  prop="applyTime" >
                         <el-date-picker v-model="dataForm.applyTime" type="datetime"
                                         placeholder="请输入上次结算时间"></el-date-picker>
                       </el-form-item>
                       <el-form-item label="审批ID"  prop="auditorId" >
                        <el-input v-model="dataForm.auditorId" placeholder="请输入"></el-input>
                       </el-form-item>
                      <el-form-item label="审批原因"  prop="auditReason">
                        <el-input v-model="dataForm.auditReason" placeholder="请输入"></el-input>
                       </el-form-item>
                       <el-form-item label="审批时间"  prop="auditTime" >
                         <el-date-picker v-model="dataForm.auditTime" type="datetime"
                                         placeholder="请输入上次结算时间"></el-date-picker>
                       </el-form-item>
                       <el-form-item label="创建时间"  prop="createTime" >
                         <el-date-picker v-model="dataForm.createTime" type="datetime"
                                         placeholder="请输入上次结算时间"></el-date-picker>
                       </el-form-item>
                       <el-form-item label="更新时间"  prop="updateTime" >
                         <el-date-picker v-model="dataForm.updateTime" type="datetime"
                                         placeholder="请输入上次结算时间"></el-date-picker>
                       </el-form-item>
                      <el-form-item label="创建用户"  prop="creator" >
                        <el-input v-model="dataForm.creator" placeholder="请输入"></el-input>
                       </el-form-item>
                       <el-form-item label="更新用户"  prop="updater" >
                        <el-input v-model="dataForm.updater" placeholder="请输入"></el-input>
                       </el-form-item>
                 <el-form-item label="是否删除"  prop="deleteFlag" >
                   <el-select  v-model="dataForm.deleteFlag" clearable placeholder="选择类型" >
                     <el-option label="不删除" :value="0"></el-option>
                     <el-option label="删除" :value="1"></el-option>
                   </el-select>

                 </el-form-item>
              <el-form-item label="状态"  prop="auditSts" >
                   <el-select  v-model="dataForm.auditSts" clearable placeholder="选择类型" >
                     <el-option label="待审核" :value="0"></el-option>
                     <el-option label="审核通过" :value="1"></el-option>
                   </el-select>
                 </el-form-item>
                  <el-form-item label="开始日期" prop="startTime">
                    <el-date-picker v-model="dataForm.startTime" type="datetime" placeholder="请选择开始日期"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束日期" prop="endTime">
                    <el-date-picker v-model="dataForm.endTime" type="datetime" placeholder="请选择结束日期"></el-date-picker>
                  </el-form-item>-->
                </div>
              </el-row>
            </el-form>
            <div class="tool-wrap">
              <div class="left-area">
                <el-button-group>
                  <el-button type="primary" size="small" @click="submitForm()" v-show="!this.$route.query.disabled">保存
                  </el-button>
                  <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
                </el-button-group>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>
</template>
<script>
  //一.导包区
  import jicTable from '@/components/jicComponentGallery/jicTable';
  import {mapState} from "vuex";
  import ThemePicker from "@/components/ThemePicker";
  import LangSelector from "@/components/LangSelector";
  import VDistpicker from 'v-distpicker';
  import elTree from '@/views/tree/src/tree.vue'
  import imgs from "../Configuration/component/imgs";

  //二.数据输出区
  export default {

//2.1 注册组件
    components: {
      jicTable,
      ThemePicker,
      LangSelector,
      VDistpicker,
      elTree,
    },

//2.2 数据初始化区
    data() {
      return {

        //2.2.1 公共数据初始化
        searchSize: 'mini',
        deptList: [],
        platformList: [],
        platformListAll: [],
        imageUrl:null,
        imgUpload: this.utils.imgUploadUrl,
// 2.2.2 form 表单数据初始化
        dataForm: {
          // id:null,
          deptId: null,
          outPlatformKey: null,
          bdCode: null,
          bdName: null,
          plaformCode: null,
          plaformName: null,
          applyAmount: null,
          amount: null,
          fileUrl: null,
          remark: null,
          applierId: null,
          applyReason: null,
          applyTime: null,
          auditorId: null,
          auditReason: null,
          auditTime: null,
          createTime: null,
          updateTime: null,
          creator: null,
          updater: null,
          deleteFlag: null,
          auditSts: null,
          startTime:null,
          endTime:null
        },
//trigger 为blur 表示丢失焦点;为change 表示值发生变化;
        dataFormRules: {
          id: [
            {required: true, message: "请输入", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          deptId: [
            {required: true, message: "请输入部门编码", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          outPlatformKey: [
            {required: true, message: "请输入", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          bdCode: [
            {required: true, message: "请输入部门编码(结算时为一对一关系；预算时为多对多关系)", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          bdName: [
            {required: true, message: "请输入部门名称", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          plaformCode: [
            {required: true, message: "请输入平台编码", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          plaformName: [
            {required: true, message: "请输入平台名称", trigger: "blur"},
            {min: 0, max: 20,message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          applyAmount: [
            {required: true, message: "请输入申请金额", trigger: "blur"},
            {    pattern:/^\d{1,10}$/, message: '10个字符以内', trigger: 'blur'},
          ],
          amount: [
            {
              required: true,
              message: "请输入",
              trigger: "blur"
            },
            {
              pattern:/^\d{1,10}$/, message: '10个字符以内', trigger: 'blur'
            },
          ],
          fileUrl: [
            {
              required: true,
              message: "请输入附件url",
              trigger: "change"
            }
          ],
          remark: [
            {required: true, message: "请输入备注", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          applierId: [
            {required: true, message: "请输入申请人ID", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          applyReason: [
            {required: true, message: "请输入申请原因", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          applyTime: [
            {required: true, message: "请输入申请时间", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          auditorId: [
            {required: true, message: "请输入审批ID", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          auditReason: [
            {required: true, message: "请输入审批原因", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          auditTime: [
            {required: true, message: "请输入审批时间", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          createTime: [
            {required: true, message: "请输入创建时间", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          updateTime: [
            {required: true, message: "请输入更新时间", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          creator: [
            {required: true, message: "请输入创建用户", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          updater: [
            {required: true, message: "请输入更新用户", trigger: "blur"},
            {min: 0, max: 20, message: "长度在 0 到 20 个字符", trigger: "blur"},
          ],
          deleteFlag: [
            {required: true, message: "请输入是否删除：0不删除， 1删除 ", trigger: ["blur",'change']},

          ],
          sts: [
            {required: true, message: "请输入状态（0-未启用；1-启用；2-失效）", trigger: ["blur",'change']},

          ],
          startTime: [{
            required: true,
            message: "请选择开始日期",
            trigger: "blur"
          }, ],
          endTime: [{
            required: true,
            message: "请选择结束日期",
            trigger: "blur"
          }, ]
        },
        //dialogVisible: false, //// 是否显示弹窗内容;
        //editDialogVisible1: false,//// 是否可编辑弹窗内容;
        //editLoading: false,////是否显示加载时动画效果;


      }//return 完结;
    },//data()方法 完结;

//2.3 Vue 方法区
    methods: {
//2.3.1 公共方法区

//2.请求列表数据
      getDetail() {
        let this_ = this;
        if (this.$route.query != null && this.$route.query.id != null && this.$route.query.id != '' && this.$route.query.id != 'null' && this.$route.query.id != "undefined") {
          let params = {};
          params.id = this_.$route.query.id;
          this.utils.request.getBudgPlatformApplyDetail(params, function (res) {
            if (res.code === "0000") {
              this_.dataForm = res.data;
            } else {
              this_.$message({message: "操作失败, " + data.msg, type: "error"});
            }
          });
        }
      },

      submitForm: function () {
        // debugger;
        let this_ = this;
        this_.$refs.dataForm.validate(valid => {
          if (valid) {
            this_.$confirm("确认提交吗？", "提示", {}).then(() => {
              this_.editLoading = true;
              const [deptId, bdName, bdCode] = this.dataForm.deptId.split(",");
              const [plaformCode, plaformName] = this.dataForm.plaformCode.split(",");
              this.dataForm.deptId = deptId;
              this.dataForm.bdCode = bdCode;
              this.dataForm.bdName = bdName;
              this.dataForm.plaformCode = plaformCode;
              this.dataForm.plaformName = plaformName;
              let params = this.dataForm;

              this_.utils.request.saveBudgPlatformApply(params, function (res) {
                if (res.code === "0000") {
                  this_.$message({message: "操作成功", type: "success"});
                } else {
                  this_.$message({message: "操作失败", type: "error"});
                }
              });
              this_.$router.go(-1);
            });
          }
        });
      },

// 7.页面弹窗处理方法
      add() {
        this.dialogVisible = true;
      },

// 8.关闭弹窗
      handleClose() {
        this.dialogVisible = false;
      },

      /*图片预览*/
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleAvatarSuccess(res, file) {
        this.dataForm.fileUrl = URL.createObjectURL(file.raw);
      },

      /*图片移除*/
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      back() {
        this.$router.go(-1);
      },
//==========2.3.1 JavaScript 自定义方法区==========

      getDeptName() {
        let this_ = this;
        this.utils.request.DepartmentNameInquiry({}, function (res) {
          this_.deptList = res.data
        });
      },

      getPlatform() {
        let this_ = this;
        this.utils.request.getPlatformName({}, function (res) {
          this_.platformListAll = res.data
        });
      },

    },
    watch:{
      'dataForm.deptId'(newVal, oblVal) {
        let this_ = this;
        let platformLists = [];
        const [deptId, bdName, bdCode] = newVal.split(",");
        if (oblVal != null || oblVal != undefined) {
          this_.dataForm.plaformCode = null;
        }
        this_.platformListAll.forEach(item => {
          if (item.deptId === deptId) {
            platformLists.push(item);
          }
        })
        this_.platformList = platformLists;
      }
    },
//1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
      this.getDetail();
      this.getDeptName();
      this.getPlatform();
    },

  }
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
